<template>
	<view class="container">
		<view class="search-param">
			<uni-search-bar placeholder="请输入客户名称" @confirm="search" @cancel="show" v-model="sapOrderForm.customerName">
			</uni-search-bar>
		</view>

		<view class="search-results-container">
			<view v-if="searchResults.length > 0">
				<view v-for="(custName, index) in searchResults" :key="index" class="search-result"
					@tap="goToDetailPage(custName)">{{ custName }}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getCustomerNameList,
		listAddressCustName,
		listAddress
	} from '@/api/tms/address'

	export default {
		data() {
			return {
				searchResults: [],
				showResults: false,
				sapOrderForm: {
					customerName: "",
				},
				searchResults: [{
						name: '客户1'
					},
					{
						name: '客户2'
					}
				],
			};
		},
		methods: {
			async search() {
				listAddressCustName({
					"custName": this.sapOrderForm.customerName,
					"pageNum": 1,
					"pageSize": 100
				}).then(response => {
					this.searchResults = response.rows;
				});
			},
			show() {
				listAddressCustName({
					"pageNum": 1,
					"pageSize": 100
				}).then(response => {
					this.searchResults = response.rows;
				});
			},
			onLoad() {
				this.search();
			},
			goToDetailPage(custName) {
				uni.navigateTo({
					url: '/pages/ec/addressDetail/index?custName=' + custName,
				});
			},
		},
	};
</script>

<style>
	.container {
		dispaly: flex;
		flex-direction: row;
		flex: auto;
		background-color: #f5f5f5
	}

	.search-param {
		background-color: #fff;
	}

	.search-results-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 200%;
		/* 设置高度为内容的高度的两倍 */
		padding: 3px;
		/* 设置内边距 */
		background-color: #fff;
		/* 设置背景色 */
	}

	.search-result {
		flex: 1;
		/* 使每个内部元素均等分布 */
		margin-bottom: 10px;
		/* 设置底部边距 */
		background-color: #fff;
		border-top: 4px solid #f5f5f5;
		/* 设置底部边框颜色 */
		padding: 7px;
		/* 设置内边距 */
	}
</style>